<template>
  <ul class="list">
  	 <li class="item" 
         v-for="item of letters"
         :key="item"
         :ref="item"
         @click="handleLetterClick"
         @touchstart.prevent="handleTouchStart"
         @touchmove="handleTouchMove"
         @touchend="handleTouchEnd"
       
      >{{item}}</li>
  	
  </ul> 
</template>
<script>

export default {
  name:'CityAlphabet',
  props:{
    cities:Object
  },
  computed:{
     letters(){
        const letters=[];
        for(let i in this.cities){
            letters.push(i)
        }
        return letters
     }
  },
  data(){
    return {
       touchStatus:false,
       startY:'',
       timer:''
    }
  },
  updated(){
     this.startY=this.$refs['A'][0].offsetTop
  },
  methods:{
   
      handleLetterClick(e){
         this.$emit('change',e.target.innerText)      
      },
      handleTouchStart(){
         this.touchStatus=true
      },
      handleTouchMove(e){
         if(this.touchStatus){

             if(this.timer){
               clearTimeout(this.timer)
             }
             this.timer=setTimeout(()=>{
                 // const startY=this.$refs['A'][0].offsetTop
                 // console.log(startY)
                 const touchY=e.touches[0].clientY-79;
                 // console.log(touchY)
                 const index=Math.floor((touchY-this.startY)/20)
                 // console.log(index)

                 if(index>=0&&index<=this.letters.length){
                    this.$emit('change',this.letters[index])
                 }
             },16)
            
         }
      },
      handleTouchEnd(){
         this.touchStatus=false
         
      }

  }

}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .list
       display: flex
       flex-direction: column
       justify-content: center
       position: absolute
       right: 0
       top: 1.58rem
       bottom: 0
       width: .4rem
       .item
          line-height: .4rem
          text-align: center
          color: $bgColor
</style>